<template>
  <Head />
  <div class="main">
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      :loosing-text="$t('loosingText')"
      :pulling-text="$t('pullingText')"
    >
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :finished-text="$t('finishedText')"
        :loading-text="$t('loadingText')"
        @load="onLoad"
      >
        <div
          v-for="(item, index) in walletDetailsList"
          :key="index"
          class="wallet"
        >
          <div class="content">
            <div class="top title">
              <span>{{  $t(item.type) }}</span>
            </div>
            <div class="top">
              <span>{{ item.coin || "-" }}</span>
              <span>{{ formatAddress(item.address) }}</span>
            </div>
            <div class="top">
              <span class="money">{{ formatMoney(item.money) }}</span>
              <span>{{ FreeTime(item.createAt, "y-m-d h:i:s") }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script setup lang="ts">
import { Async_cashList } from "@/server/user";
import { formatMoney, FreeTime } from "@/utils/tool";
import { formatAddress } from "@/utils/kit";
import { useRouter } from "vue-router";
const router = useRouter();
const walletDetailsList = ref([]);
const queryParam = router.currentRoute.value.query;
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const pageParams = ref({
  page: 0,
  size: 20
});

const onLoad = () => {
  if (refreshing.value) {
    walletDetailsList.value = [];
    refreshing.value = false;
  }
  getList();
};

const getList = async () => {
  try {
    let { list }: any = await Async_cashList({
      page: pageParams.value.page,
      size: pageParams.value.size,
      coin: queryParam.coin
    });
    loading.value = false;
    if (!list) {
      // 如果返回数据为空，表示已加载完成
      finished.value = true;
    } else {
      walletDetailsList.value = walletDetailsList.value.concat(list);
      pageParams.value.page++;
    }
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
};

const onRefresh = () => {
  pageParams.value.page = 0;
  walletDetailsList.value = [];
  refreshing.value = false;
  finished.value = false;
  loading.value = true;
  getList();
};
</script>
<style scoped lang="scss">
.main {
  width: 100%;
  padding: 12px;
  height: calc(100vh - 50px);
}

.wallet {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 6px;

  .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #11202f;
    padding: 12px;
    border-radius: 6px;

    .top {
      font-size: 16px;
      color: #ccc;
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      margin-bottom: 5px;

      &:last-child {
        margin-bottom: 0;
      }

      &.title {
        color: #fff;
        font-size: 16px;
      }

      .money {
        font-weight: bold;
        color: #f6d664;
        font-family: 'DINPro-Black"';
      }
    }
  }
}
</style>
